<template>
    <div class="register assets">
        <div v-if="assetShow">
            <van-nav-bar :title="$t('operation.title')" leftArrow @click-left="_return" :right-text="$t('operation.tip')" @click-right="showVoucher"/>
            <div class="assetsMain">
                <van-cell :title="$t('common.coin')" :value="account" @click.native="chooseCoin" is-link/>
                <div class="moves">
                    <p>{{$t('operation.cold_available')}} <span @click="$router.push('/home/paid/cash')">{{$t('withdraw.title')}}</span></p>
                    <van-row type="flex" align="bottom">
                        <van-col span="6" offset="8">{{Number(price.code)}}</van-col>
                        <van-col span="3" offset="4">{{account}}</van-col>
                    </van-row>
                </div>
                <div class="turn">
                    <p class="tip">{{$t('operation.cold')}} <img :src="right" alt=""> {{$t('operation.OE')}}</p>
                    <div class="turnMain login">
                        <van-field v-model="turn.to_oe" :placeholder="$t('operation.notice_one')"><p slot="button" @click="allOe">{{$t('operation.all')}}</p></van-field>
                        <div class="confirm">
                            <p>{{$t('operation.notice_two')}}</p>
                            <button class="btn" style="background:linear-gradient(180deg, #54d8b4, #26c196) !important;" @click="submitOe">{{$t('info.turn')}}</button>
                        </div>
                    </div>
                </div>
                <div class="moves" style="background:linear-gradient(90deg,rgba(203,175,137,1) 0%,rgba(219,200,170,1) 100%);">
                    <p>{{$t('operation.OE_available')}}</p>
                    <van-row type="flex" align="bottom">
                        <van-col span="6" offset="8">{{Number(price.oe)}}</van-col>
                        <van-col span="3" offset="4">{{account}}</van-col>
                    </van-row>
                </div>

                <div class="turn">
                    <p class="tip">{{$t('operation.OE')}} <img :src="right" alt=""> {{$t('operation.cold')}}</p>
                    <div class="turnMain login">
                        <van-field v-model="turn.to_cold" :placeholder="$t('operation.notice_one')"><p slot="button" @click="allCode">{{$t('operation.all')}}</p></van-field>
                        <div class="confirm">
                            <p>{{$t('operation.notice_three')}}</p>
                            <button class="btn" @click="submitCode">{{$t('info.turn')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <voucher v-else @_return="_returns"></voucher>
        <van-popup v-model="typeShow" position="bottom" :overlay="true">
            <van-picker show-toolbar :title="$t('info.coins')" :columns="columns" @cancel="onCancel" @confirm="onConfirm"/>
        </van-popup>
        <van-popup v-model="pwdShow" position="bottom" :overlay="true">
            <van-nav-bar :title="$t('pay.title')" leftArrow @click-left="pwdShow = false"/>
            <div class="pwdMain login">
                <van-cell-group>
                    <van-field v-model="payPassword" :placeholder="$t('pay.title')" input-align="center" type="password" maxlength="6"/>
                </van-cell-group>
                <p @click='forgetPwd'>{{$t('common.forget_password')}}？</p>
                <div class="btns">
                    <van-button type="info" @click="submitMove">{{$t('pay.button')}}</van-button>
                </div>
            </div>
        </van-popup>
        <loading v-if="loadingShow"></loading>
    </div>
</template>

<script>
    import voucher from '@/components/head/voucher'
    export default {
        data() {
            return {
                account:'AAT',
                turn:{
                    to_oe:'',
                    to_cold:''
                },
                typeShow:false,
                columns:[],
                price:{
                    code:'',
                    oe:''
                },
                pwdShow:false,
                payPassword:'',
                turnTo:null,
                assetShow:true,
                right:require('../../assets/right.png'),
                loadingShow:false
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            getData(){
                this.$api.get('index/getCoins')
                    .then(res =>{
                        this.columns = []
                        res.detail.map(i => this.columns.push(i.unit))
                    })
            },
            chooseCoin(){
                this.typeShow = true
            },
            onCancel(){
                this.typeShow = false
            },
            onConfirm(data){
                this.account = data
                this.onCancel()
                this.getAssets()
            },
            getAssets(){
                this.$api.post('user/assoper',{coin_name:this.account.toLowerCase(),type:0})
                    .then(res =>{
                        this.price.oe = Number(res.detail.oeblance.ye).toFixed(4)
                        this.price.code = Number(res.detail.lqbblance.ye).toFixed(4)
                    })
            },
            allOe(){
                if(this.price.code.toString().indexOf('.') != -1){
                    this.turn.to_oe = this.price.code.toString().substr(0,this.price.code.toString().indexOf('.'))
                }else{
                    this.turn.to_oe = this.price.code
                }

            },
            allCode(){
                if(this.price.oe.toString().indexOf('.') != -1){
                    this.turn.to_cold = this.price.oe.toString().substr(0,this.price.oe.toString().indexOf('.'))
                }else{
                    this.turn.to_cold = this.price.oe
                }
            },
            submitOe(){
                if(!this.turn.to_oe){
                    this.$toast(this.$t('operation.notice_one'))
                    return
                }
                if(this.turn.to_oe == 0){
                    return
                }
                this.turnTo = true
                this.pwdShow = true
            },
            submitCode(){
                if(!this.turn.to_cold){
                    this.$toast(this.$t('operation.notice_one'))
                    return
                }
                if(this.turn.to_cold == 0){
                    return
                }
                this.turnTo = false
                this.pwdShow = true
            },
            submitMove(){
                if(!this.payPassword){
                    this.$toast(this.$t('pay.title'))
                    return
                }
                if(this.turnTo){
                    let param = {
                        paypassword:this.payPassword,
                        coin_name:this.account.toLowerCase(),
                        num:this.turn.to_oe
                    }
                    this.loadingShow = true
                    this.$api.post('user/turnFromZnn',param)
                        .then(res =>{
                            this.loadingShow = false
                            this.$toast(res.message)
                            this._return()
                        })
                }else{
                    let param = {
                        paypassword:this.payPassword,
                        coin_name:this.account.toLowerCase(),
                        num:this.turn.to_cold
                    }
                    this.loadingShow = true
                    this.$api.post('user/turnToZnn',param)
                        .then(res =>{
                            this.loadingShow = false
                            this.$toast(res.message)
                            this._return()
                        })
                }
            },
            forgetPwd(){
                this.$router.push({name:'safe',params:{mine:this.$route.path}})
            },
            showVoucher(){
                this.assetShow = false
            },
            _returns(){
                this.assetShow = true
            }
        },
        created() {
            this.getData()
            this.getAssets()
        },
        mounted() {
            this.$emit('disappear')
        },
        components:{
            voucher
        }
    }
</script>

<style lang="stylus" scoped>
    bac = linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
    back = linear-gradient(180deg, #54d8b4, #26c196) !important
    font = #CBAF89
    fonts = #898989
    [class*=van-hairline]::after{
        border: none;
    }
    .pwdMain{
        width: 96%;
        margin: 0 auto;
        .van-cell-group{
            border-top: 1px solid #ebedf0;
            border-bottom: 1px solid #ebedf0;
        }
        p{
            text-align: center;
            color: #FDDEB0;
            font-size: 12px;
            margin-top: 10px;
        }
        .van-cell{
            background: #fff !important;
            color: #26c196;
            .van-cell__value{
                color: #FDDEB0;
            }
        }
        .btns{
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            margin-top: 170px;
            padding-bottom 15px
            .van-button{
                width: 100%;
                color: #000;
                background:linear-gradient(180deg, #54d8b4, #26c196);
                border: none;
                /*margin-left: 5%;*/
            }
        }
    }
    .assetsMain
        width 94%
        margin 0 auto
        .van-cell
            background back
            color #594E3F
            border-radius 5px
            .van-cell__value,.van-cell__right-icon
                color #1F1F1F


        .moves{
            background:back;
            margin-top: 10px;
            padding: 10px 10px 15px
            border-radius: 5px;
            &:last-child {
                margin-top 5px
            }
            p{
                color: #115f49
                font-size 12px
                position relative
                span {
                    position absolute
                    right 0
                    color #000
                    border 1px solid black
                    border-radius 5px
                    padding 3px 5px
                }
            }
            .van-row {
                margin-top: 5px;
                align-items: baseline;
                .van-col {
                    text-align: center;
                }
                .van-col--6 {
                    font-size: 20px;
                    color: #000;
                }
                .van-col--3{
                    color: #707070
                }
            }
        }

        .turn
            margin-top 15px
            .tip
                border-left 3px solid #54d8b4
                padding-left 5px
                color #115f49
                display flex
                align-items center
                img
                    margin 0 5px 0 5px
                    width 12px
            .turnMain
                background rgba(0,0,0,0) !important
                margin-top 3px
                padding-bottom 15px
                border-radius 5px
                margin-top 20px
                .van-cell
                    background rgba(0,0,0,0) !important
                    border-radius 5px 5px 0 0
                    .van-field__button p
                        color #23ba92
                .van-cell:not(:last-child)::after
                    border none
                .van-cell:not(:last-child)
                    border-bottom 1px solid #ebebeb;
                .confirm
                    width 94%
                    margin 13px auto 0
                    p
                        font-size 14px
                        color #D8D8D8
                    .btn
                        margin-top 5px
                        color #fff


</style>